<template>
  <div>
    <el-collapse accordion>
      <el-collapse-item name="1">
        <template #title
          >&nbsp;&nbsp; 展开查询<el-icon class="header-icon">
            <info-filled />
          </el-icon>
        </template>
        <div>
          <el-row
            :gutter="20"
            style="width: 1000px; margin-top: 30px; margin-left: 20px"
          >
            <el-col :span="6">
              <div class="grid-content ep-bg-purple" />
              物料/服务编码
              <el-input v-model="form.itemCode" style="width: 320px" />
            </el-col>
            <el-col :span="6" style="margin-left: 170px">
              <div class="grid-content ep-bg-purple" />
              物料服务名称<el-input
                v-model="form.itemName"
                style="width: 320px"
              />
            </el-col>

            <el-col :span="6">
              <div class="grid-content ep-bg-purple" />
              <span style="margin-left: 170px">物料/服务</span
              ><el-select
                v-model="form.itemServeId"
                style="width: 320px; margin-left: 170px"
              >
                <el-option label="请选择" :value="0" />
                <el-option
                  v-for="item in inventoryInfo"
                  :label="item.itemServeName"
                  :value="item.itemServeId"
                  :key="item.itemServeId"
                />
              </el-select>
            </el-col>
          </el-row>

          <el-row
            :gutter="20"
            style="width: 1000px; margin-top: 10px; margin-left: 20px"
          >
            <el-col :span="6">
              <div class="grid-content ep-bg-purple" />
              物料服务类别
              <el-select v-model="form.itemTypeId" style="width: 320px">
                <el-option label="请选择" :value="0" />
                <el-option
                  v-for="item in type"
                  :label="item.itemTypeName"
                  :value="item.itemTypeId"
                  :key="item.itemTypeId"
                />
              </el-select>
            </el-col>

            <el-col :span="6" style="margin-left: 1000px">
              <div class="grid-content ep-bg-purple" />
              <el-button @click="resetForm()">重置</el-button>
              <el-button type="primary" style="width: 100px" @click="getlist()"
                >查询</el-button
              >
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
  <div>
    <el-button @click="router.push({ name: 'MaterialManagementAdd' })"
      >新增物料管理</el-button
    >
  </div>
  <el-table :data="list" style="width: 100%">
    <el-table-column prop="inventoryInfoId" label="序号" />
    <el-table-column prop="itemServeName" label="物料/服务" />
    <el-table-column prop="itemCode" label="物料/服务编码" />
    <el-table-column prop="itemName" label="物料/服务名称" />
    <el-table-column prop="itemTypeName" label="物料/服务类别" />
    <el-table-column prop="itemUnitName" label="物料单位" />
    <el-table-column prop="specsUnitName" label="物料规格" />
    <el-table-column prop="inventoryLimit" label="库存上限" />
    <el-table-column prop="inventoryMinimum" label="库存下限" />
    <el-table-column prop="itemInfoState" label="状态">
      <template v-slot="scope">
        <span v-if="scope.row.itemInfoState == 1">有效</span>
        <span v-else>无效</span>
      </template>
    </el-table-column>
    <el-table-column prop="reviewStatus" label="审批状态">
      <template v-slot="scope">
        <span v-if="scope.row.reviewStatus == 1">已审批</span>
        <span v-else>已提交</span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import axios from "axios";
const apiurls = import.meta.env.VITE_APP_API_URL_ProductionAdd;
const apiurl = import.meta.env.VITE_APP_API_URL_ProductionShow;
const router = useRouter();
const form = reactive({
  itemCode: "",
  itemName: "",
  itemServeId: "",
  itemTypeId: "",
});
//重置
const resetForm = () => {
  (form.itemCode = ""),
    (form.itemName = ""),
    (form.itemServeId = ""),
    (form.itemTypeId = "");
  getlist();
};
//物料/服务下拉框
const inventoryInfo: any = ref([]);
const getinventoryInfo = () => {
  axios.post(apiurl + "/api/ShowMaterial/GetMaterial").then((res) => {
    inventoryInfo.value = res.data.data;
  });
};
//物料/服务类型下拉框
const type: any = ref([]);
const gettype = () => {
  axios.post(apiurl + "/api/ShowMaterial/GetItemType").then((res) => {
    type.value = res.data.data;
  });
};
const list: any = ref([]);
const getlist = () => {
  axios
    .post(apiurl + "/api/ShowMaterial/GetItemInfo", {
      itemCode: form.itemCode,
      itemName: form.itemName,
      itemServeId: form.itemServeId || 0,
      itemTypeId: form.itemTypeId || 0,
    })
    .then((res) => {
      list.value = res.data.data;
    });
};

onMounted(() => {
  getinventoryInfo();
  getlist();
  gettype();
});
</script>
